<template>
	<d2-container>
		<template>
			<!-- <el-button slot="header" type="primary" @click="add">添加店铺</el-button> -->
			
			<el-table stripe border :data="tableData" style="width: 100%">
				<el-table-column type="index" fixed label="序号" width="50" align="center"></el-table-column>
				
				<el-table-column label="店铺logo" width="110" align="center">
					<template slot-scope="scope">
						<el-image fit="cover" style="width: 80px; height: 80px" :src="scope.row.shopLogo" :preview-src-list="[scope.row.shopLogo]"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="店铺海报" width="110" align="center">
					<template slot-scope="scope">
						<el-image fit="cover" style="width: 80px; height: 80px" :src="scope.row.posterUrl" :preview-src-list="[scope.row.posterUrl]" v-if="scope.row.posterUrl"></el-image>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column label="分享二维码" width="110" align="center">
					<template slot-scope="scope">
						<el-image fit="cover" style="width: 80px; height: 80px" :src="scope.row.miniQrCode" :preview-src-list="[scope.row.miniQrCode]" v-if="scope.row.miniQrCode"></el-image>
						<span v-else>-</span>
					</template>
				</el-table-column>
				
				<el-table-column prop="shopNo" label="店铺编号" width="130" align="center"></el-table-column>
				<el-table-column prop="shopName" label="店铺名称" width="180"></el-table-column>
				
				<el-table-column prop="phone" label="联系电话" width="140"></el-table-column>
				<el-table-column prop="shopAddress" label="店铺地址" width="200"></el-table-column>
				
				<el-table-column prop="shopPickupStatus" label="直播间提货点" width="120" align="center">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.shopPickupStatus == 1">是</el-tag>
						<template v-else>-</template>
					</template>
				</el-table-column>
				<el-table-column prop="businessStatus" label="营业状态" width="110" align="center">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.businessStatus == 1">营业中</el-tag>
						<el-tag type="info" v-if="scope.row.businessStatus == 2">暂停营业</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="businessBeginTime" label="营业时间" width="180" align="center">
					<template slot-scope="scope">
						<template v-if="scope.row.businessBeginTime && scope.row.businessEndTime">
							{{scope.row.businessBeginTime}}至{{scope.row.businessEndTime}}
						</template>
						<template v-else>-</template>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="remark" label="店铺说明"></el-table-column> -->
				
				<el-table-column fixed="right" label="操作" width="200">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
						<el-button type="warning" size="small" @click="createQRcode(scope.row.id)">生成分享码</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		
		<!-- 翻页 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:total="total"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
				></el-pagination>
			</div>
		</template>
		
		<!-- 弹窗 -->
		<template>
			<!-- 添加/编辑弹窗 -->
			<handle-shop-dialog
				:isShow="showHandleDialog"
				:id="currentId"
				:isEdit="isEdit"
				@submit="fetchData"
				@close="closeHandleDialog"
			></handle-shop-dialog>
			
			<!-- 分享二维码 -->
			<el-dialog title="店铺分享二维码" :visible.sync="showShareQrcode" width="500px" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="closeShareQrcode">
				<div class="share-qrcode" v-if="shareQrcode">
					<img :src="shareQrcode" />
			
					<p>点击右键，保存图片</p>
				</div>
			
				<div class="share-qrcode-loading" v-else>二维码加载中...</div>
			</el-dialog>
		</template>
	</d2-container>
</template>

<script>
	import { getShops, createQRcode } from '@api/shop/shop'
	import handleShopDialog from './components/handle-shop-dialog'
	import dayjs from 'dayjs'
	export default {
		name: 'shop-list',
		components: {
			handleShopDialog
		},
		data() {
			return {
				tableData: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				
				showHandleDialog: false,
				isEdit: false,
				currentId: 0,
				currentItem: {},
				
				showShareQrcode: false,
				shareQrcode: '', //分享二维码链接
			}
		},
		methods: {
			fetchData() {
				this.loading = true;
				
				getShops()
					.then(res => {
						this.tableData = res.data;
						this.loading = false;
					})
					.catch(err => {
						this.loading = false;
					})
			},
			handleSizeChange(val) { //处理显示条数
				this.pageSize = val;
				this.fetchData();
			},
			handleCurrentChange(val) { //处理翻页
				this.currentPage = val;
				this.fetchData();
			},
			formatterTime(val) {
				return dayjs(val).format('HH:mm:ss')
			},
			
			add() { //添加
				this.showHandleDialog = true;
			},
			edit(id) { //编辑
				this.currentId = id;
				this.isEdit = true;
				this.showHandleDialog = true;
			},
			closeHandleDialog() { //关闭添加or编辑弹窗
				this.showHandleDialog = false;
				this.isEdit = false;
			},
			
			createQRcode(id) { //生成分享二维码
				this.showShareQrcode = true;
				createQRcode({
					shopId: id,
				})
					.then(res => {
						this.shareQrcode = res.data;
					})
			},
			closeShareQrcode() {
				this.showShareQrcode = false;
				this.shareQrcode = '';
			}
		},
		mounted() {
			this.fetchData();
		}
	}
</script>

<style lang="scss" scoped>
	.share-qrcode {
		width: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		display: flex;
		img {
			width: 300px;
			height: 300px;
		}
		p {
			height: 30px;
			font-size: 18px;
			margin-top: 30px;
		}
	}

	.share-qrcode-loading {
		width: 100%;
		height: 360px;
		font-size: 18px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		display: flex;
	}
</style>